<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        @font-face {
            font-family: 'zdfont';
            src: url('./assets/DS-DIGIT.TTF') format('truetype');
        }

        @media (min-width: 1920px) {
            html {
                font-size: 40px;
            }
        }

        @media (max-width: 1920px) {
            html {
                font-size: 35px;
            }
        }

        @media (max-width: 1600px) {
            html {
                font-size: 30px;
            }
        }

        @media (max-width: 1400px) {
            html {
                font-size: 27px;
            }
        }

        @media (max-width: 1366px) {
            html {
                font-size: 25px;
            }
        }

        @media (max-width: 1024px) {
            html {
                font-size: 23px;
            }
        }

        @media (max-width: 812px) {
            html {
                font-size: 20px;
                overflow-x: hidden;
            }
        }

        body {
            background-color: black;
            user-select: none;
        }

        .clock-continer {
            position: absolute;
            width: 100%;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .year {
            margin: 1rem;
            text-align: center;
            font-Size: 3.5rem;
            color: #dc2464;
            font-family: 'zdfont';
        }

        .clock {
            height: 4rem;
            position: relative;
            text-align: center;
        }

        .clock-time {
            position: relative;
            font-size: 2rem;
            text-align: center;
            padding: 1.5rem 0;
            margin-top: 1.5rem;
        }

        .clock-time::before {
            position: absolute;
            content: '';
            height: 1px;
            width: 5rem;
            background: #e24079;
            left: 50%;
            top: 0;
            margin-left: -2rem;
        }

        .digit {
            width: 2.2rem;
            height: 4rem;
            margin: 0 0.2rem;
            position: relative;
            display: inline-block;
        }

        .digit .segment {
            background: #262626;
            border-radius: 0.5rem;
            position: absolute;
        }

        .digit .segment.on,
        .separator {
            background: #dc2464;
        }

        .separator-time {
            background: transparent;
            margin: 0 0.4rem;
        }

        .separator {
            display: inline-block;
            position: relative;
            width: 0.4rem;
            height: 100%;
        }

        .separator .dian {
            position: absolute;
            top: 2.6rem;
            display: block;
            width: 0.4rem;
            height: 0.4rem;
            background: #dc2464;
        }

        .separator .dian:first-child {
            top: 1rem;
        }

        .digit .segment:nth-child(1) {
            top: 0px;
            left: 0.2rem;
            right: 0.2rem;
            height: 0.4rem;
        }

        .digit .segment:nth-child(2) {
            top: 0.4rem;
            right: 0px;
            width: 0.4rem;
            height: 7.5rem;
            height: calc(50% - 0.5rem);
        }

        .digit .segment:nth-child(3) {
            bottom: 0.2rem;
            right: 0px;
            width: 0.4rem;
            height: 7.5rem;
            height: calc(50% - 0.5rem);
        }

        .digit .segment:nth-child(4) {
            bottom: 0px;
            right: 0.2rem;
            height: 0.4rem;
            left: 0.2rem;
        }

        .digit .segment:nth-child(5) {
            bottom: 0.2rem;
            left: 0px;
            width: 0.4rem;
            height: 7.5rem;
            height: calc(50% - 0.5rem);
        }

        .digit .segment:nth-child(6) {
            top: 0.4rem;
            left: 0px;
            width: 0.4rem;
            height: 7.5rem;
            height: calc(50% - 0.5rem);
        }

        .digit .segment:nth-child(7) {
            bottom: 95px;
            bottom: calc(50% - 2px);
            right: 0.2rem;
            left: 0.2rem;
            height: 0.4rem;
        }

        @media (max-width: 812px) {
            .clock {
                height: 3rem;
                padding-bottom: 1.5rem;
                box-sizing: content-box;
            }

            .digit {
                height: 3rem;
                width: 1.8rem;
                margin: 0 1px;
            }

            .separator-time {
                margin: 0 2px;
            }

            .separator .dian {
                position: absolute;
                top: 2rem;
                display: block;
                width: 0.3rem;
                height: 0.3rem;
                background: #dc2464;
            }

            .separator .dian:first-child {
                top: 10px;
            }

            .digit .segment:nth-child(1) {
                height: 0.3rem;
            }

            .digit .segment:nth-child(2) {
                width: 0.3rem;
            }

            .digit .segment:nth-child(3) {
                width: 0.3rem;
            }

            .digit .segment:nth-child(4) {
                height: 0.3rem;
            }

            .digit .segment:nth-child(5) {
                width: 0.3rem;
            }

            .digit .segment:nth-child(6) {
                width: 0.3rem;
            }

            .digit .segment:nth-child(7) {
                height: 0.3rem;
            }

            .clock-time {
                font-size: 2rem;
            }

            .clock-time::before {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div class="clock-continer">
        <div class="year">
            <span></span>
        </div>
        <div class="clock">
            <div class="digit hours">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
            <div class="digit hours">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
            <div class="separator separator-time">
                <span class="dian"></span>
                <span class="dian"></span>
            </div>
            <div class="digit minutes">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
            <div class="digit minutes">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
            <div class="separator separator-time">
                <span class="dian"></span>
                <span class="dian"></span>
            </div>
            <div class="digit seconds">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
            <div class="digit seconds">
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
                <div class="segment"></div>
            </div>
        </div>
    </div>
</body>

<script>
    var ConsoleManager = {
        onOpen() {
			alert("感谢使用,再见~");
			location.href='/'
			clearInterval(this.timer);
        },
        onClose() {
        },
        init() {
            var self = this;
            var _d = document.createElement('div');
            var isOpening = false,
                isOpened = false;
            Object.defineProperty(_d, 'id', {
                get() {
                    if (!isOpening) {
                        self.onOpen();
                        isOpening = true;
                    }
                    isOpened = true;
                }
            });
            self.timer = setInterval(function () {
                isOpened = false;
                console.info(_d);
                console.clear();
                if (!isOpened && isOpening) {
                    self.onClose();
                    isOpening = false;
                }
            }, 150)
        }
    }
    ConsoleManager.init();

    ; (function () {
        var nowDate = new Date(), digitSegments = [
            [1, 2, 3, 4, 5, 6],
            [2, 3],
            [1, 2, 7, 5, 4],
            [1, 2, 7, 3, 4],
            [6, 7, 2, 3],
            [1, 6, 7, 3, 4],
            [1, 6, 5, 4, 3, 7],
            [1, 2, 3],
            [1, 6, 7, 3, 4, 5, 2, 1],
            [7, 6, 1, 2, 3, 4]
        ];


        var _hours = document.querySelectorAll('.hours'), _minutes = document.querySelectorAll('.minutes'), _seconds = document.querySelectorAll('.seconds');

        var hours = null, minutes = null, seconds = null;

        // year
        document.querySelector('.year').innerText = nowDate.getFullYear();

        var updateDate = function () {
            nowDate = new Date();
            var _h = nowDate.getHours(), _m = nowDate.getMinutes(), _s = nowDate.getSeconds();

            if (_h !== hours) {
                hours = _h;
                setNumber(_hours[0], Math.floor(hours / 10), 1);
                setNumber(_hours[1], hours % 10, 1);
            }


            if (_m !== minutes) {
                minutes = _m;
                setNumber(_minutes[0], Math.floor(minutes / 10), 1);
                setNumber(_minutes[1], minutes % 10, 1);
            }


            if (_s !== seconds) {
                seconds = _s
                setNumber(_seconds[0], Math.floor(seconds / 10), 1);
                setNumber(_seconds[1], seconds % 10, 1);
            }
            // requestAnimationFrame(updateDate)
        }

        // 指定元素全屏
        function requestFullScreen(element) {
            var requestMethod = element.requestFullScreen || //W3C
                element.webkitRequestFullScreen || //FireFox
                element.mozRequestFullScreen || //Chrome等
                element.msRequestFullScreen; //IE11
            if (requestMethod) {
                requestMethod.call(element);
            } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

        // 判断是否是全屏
        function isFullScreen() {
            return !!(
                document.fullscreen ||
                document.mozFullScreen ||
                document.webkitIsFullScreen ||
                document.webkitFullScreen ||
                document.msFullScreen
            );
        }

        // 退出全屏
        function exitFullscreen() {
            if (document.exitFullScreen) {
                document.exitFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (element.msExitFullscreen) {
                element.msExitFullscreen();
            }
        }

        var setNumber = function (digit, number, on) {
            var segments = digit.querySelectorAll('.segment'), current = parseInt(digit.getAttribute('data-value'));

            if (!isNaN(current) && current != number) {
                digitSegments[current].forEach(function (digitSegment, index) {
                    setTimeout(function () {
                        segments[digitSegment - 1].classList.remove('on');
                    }, index * 45)
                });
            }

            if (isNaN(current) || current != number) {
                setTimeout(function () {
                    digitSegments[number].forEach(function (digitSegment, index) {
                        setTimeout(function () {
                            segments[digitSegment - 1].classList.add('on');
                        }, index * 45)
                    });
                }, 250);
                digit.setAttribute('data-value', number);
            }
        }

        document.addEventListener('DOMContentLoaded', function () {
            updateDate()
            var timer = setInterval(updateDate, 1000);

        })

        window.onload = function () {
            document.addEventListener('click', function () {
                if (isFullScreen()) {
                    exitFullscreen()
                } else {
                    requestFullScreen(document.querySelector('body'))
                }
            })
        }
    })();

</script>

</html>